<template>
	<view class="acitvity_details safe_area">
		<image :src="info?.cover" class="acitvity_details_img"></image>
		<image class="acitvity_details_status" src="http://qianxueapplet.suoeryun.com/notStarted.png"
			v-if="info?.activityStatus === '1'"></image>
		<image class="acitvity_details_status" src="http://qianxueapplet.suoeryun.com/inProgress.png"
			v-else-if="info?.activityStatus === '2'"></image>
		<image class="acitvity_details_status" src="http://qianxueapplet.suoeryun.com/ended.png"
			v-else-if="info?.activityStatus === '3'">
		</image>
		<view class="acitvity_details_header">
			<view class="acitvity_details_header_title">{{info?.activityName}}</view>
			<view class="acitvity_details_header_tag" v-if="info?.lable">
				<text v-for="tag in info?.lable?.split(',')" :key="tag">#{{tag}}</text>
			</view>
			<view class="acitvity_details_header_text">活动时间：{{info?.activityStart}}至{{info?.activityEnd}}</view>
			<view class="acitvity_details_header_text">报名时间：{{info?.applyStart}}至{{info?.applyEnd}}</view>
			<view class="acitvity_details_header_text">
				类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：{{info?.activityTypeName}}
			</view>
			<!-- <view class="acitvity_details_header_price">
				<view class="acitvity_details_header_text">
					原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：<text
						:class="{red:!info?.discountPrice,decoration:info?.discountPrice}">{{info?.originalPrice}}元</text>
				</view>
				<view class="acitvity_details_header_text" v-if="info?.discountPrice">
					折扣价：<text class="red">{{info?.discountPrice}}元</text></view>
			</view> -->
			<view class="acitvity_details_header_people">
				<view @click="handlePhone(info?.leaderPhone)" class="acitvity_details_header_text">
					带&nbsp;&nbsp;队&nbsp;&nbsp;人：
					<text>{{info?.leader}}</text>
					<image src="http://qianxueapplet.suoeryun.com/phone.png"></image>
				</view>
				<view @click="handlePhone(info?.receiverPhone)" class="acitvity_details_header_text">
					接&nbsp;&nbsp;待&nbsp;&nbsp;人：
					<text>{{info?.receiver}}</text>
					<image src="http://qianxueapplet.suoeryun.com/phone.png"></image>
				</view>
			</view>
			<view class="acitvity_details_header_btn">
				<view @click="handleclick('pages/index/videoSet','1','图集')">
					<image src="http://qianxueapplet.suoeryun.com/atlas.png"></image>
					<text>图集</text>
				</view>
				<view @click="handleclick('pages/index/videoSet','2','视频集')">
					<image src="http://qianxueapplet.suoeryun.com/videoCollection.png">
					</image>
					<text>视频集</text>
				</view>
			</view>
		</view>
		<view class="acitvity_details_title">
			<text></text>
			<view>研学基地</view>
		</view>
		<view class="acitvity_details_base">
			<view class="acitvity_details_base_top" @click="handleBase">
				<view class="acitvity_details_base_top_left">
					<image src="http://qianxueapplet.suoeryun.com/trainingBase.png"></image>
					{{info?.baseName}}
				</view>
				<view class="acitvity_details_base_top_right">更多信息<u-icon name="arrow-right" color="#FF943C"></u-icon>
				</view>
			</view>
			<view class="acitvity_details_base_btm" @click="handleAddress">
				<image src="http://qianxueapplet.suoeryun.com/location2.png"></image>
				<text>{{info?.baseAddress}}</text>
			</view>
		</view>
		<view class="acitvity_details_title">
			<text></text>
			<view>活动简介</view>
		</view>
		<view class="acitvity_details_synopsis">
			{{info?.activityProfile}}
		</view>
		<view class="acitvity_details_divider">
			<text></text>
			<text>活动介绍</text>
			<text></text>
		</view>
		<!-- 活动介绍 -->
		<view class="acitvity_details_guide">
			<rich-text :nodes="handleFormat(info?.activityContent)"></rich-text>
		</view>
		<!-- 底部按钮 -->
		<view class="acitvity_details_btn safe_area">
			<view @click="handleLike">
				<image src="http://qianxueapplet.suoeryun.com/like.png" v-if="info?.izLike === '0'"></image>
				<image src="http://qianxueapplet.suoeryun.com/likeSelect.png" v-else>
				</image>
				<text :style="{color:info?.izLike === '0'?'#666666':'#FF943C'}">{{info?.likes}}</text>
			</view>
			<view @click="handleComments">
				<image src="http://qianxueapplet.suoeryun.com/comments.png"></image>
				<text>{{info?.comment}}</text>
			</view>
			<view @click="handleShare">
				<image src="http://qianxueapplet.suoeryun.com/forward.png"></image>
				<text>{{info?.relay}}</text>
			</view>
			<view @click="handleCollect">
				<image src="http://qianxueapplet.suoeryun.com/collectSelected.png" v-if="info?.isCollect"></image>
				<image src="http://qianxueapplet.suoeryun.com/collect.png" v-else></image>
				<text>{{info?.collect}}</text>
			</view>
			<button open-type="contact">
				<image src="http://qianxueapplet.suoeryun.com/service.png"></image>
				<text>客服</text>
			</button>
		</view>
	</view>

	<!-- 评论 -->
	<comment ref="commentRef" @close="handleCommentClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>
	<view style="position: fixed;"></view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { qxActivityManageQueryById, addLikes, qxCommentCollectEdit } from '@/config/index.api';
	import { ref, unref, onBeforeUnmount } from "vue";
	import { handleFormat } from '@/util/index';
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";

	const info = ref();
	const commentRef = ref();
	const shareRef = ref();

	onLoad(async (params) => {
		console.log(params, 'params');
		info.value = params;
	})

	onShow(() => {
		loadData();
	})

	onBeforeUnmount(() => {
		commentRef.value.handleClose()
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		const res = await qxActivityManageQueryById({ id: info.value?.id });
		console.log(res, 'res');
		info.value = { ...unref(info), ...res };
		// 消息点进来显示评论数据
		if (unref(info)?.orderId) {
			//type 1 活动 2图集 3视频
			commentRef.value.handleShow({ activityId: info.value?.id, num: info.value?.comment ?? 0, belongId: info.value?.id, type: '1', orderId: unref(info)?.orderId });
		}
	}


	// /**
	//  * 分享
	//  */
	// onShareAppMessage(async (res) => {
	// 	console.log(res, '123');
	// 	await updateActivityNum({ operationType: '2', activityId: info.value?.id, });
	// 	// loadData();
	// 	return {
	// 		title: info.value?.activityName,
	// 		path: `/pages/index/acitvityDetails?id=${info.value?.id}`
	// 	}
	// })

	/**
	 * 打电话
	 */
	function handlePhone(phone) {
		// 拨打电话。
		uni.makePhoneCall({
			phoneNumber: phone
		});
	}

	/**
	 * 基地导航
	 */
	function handleAddress() {
		// 打开地图选择位置。
		uni.openLocation({
			latitude: Number(info.value?.lat),//目标地纬度
			longitude: Number(info.value?.lng),//目标地纬度
			name: info.value?.baseAddress,
			success: (res) => {
				console.log(res, 'res');
			},
			fail: (err) => {
				console.log(err, 'err');
			}
		})

	}

	/**
	 * 基地详情
	 */
	function handleBase() {
		uni.$u.route('/pages/index/baseDetails', {
			id: info.value?.homebaseId
		});
	}

	/**
	 * 点赞
	 */
	function handleLike() {
		uni.$u.throttle(async function () {
			await addLikes({ activityId: info.value?.id });
			uni.showToast({
				icon: 'none',
				title: info.value?.izLike === '0' ? '点赞成功!' : '取消点赞！', success() {
					setTimeout(_ => {
						loadData();
					}, 500)
				}
			})
		}, 1000)
	}

	/**
	 * 评论
	 */
	function handleComments() {
		//type 1 活动 2图集 3视频
		commentRef.value.handleShow({ activityId: info.value?.id, num: info.value?.comment ?? 0, belongId: info.value?.id, type: '1' });
	}

	/**
	 * 评论回调
	 */
	function handleCommentClose(num) {
		uni.showTabBar();
		info.value.comment = num;
	}

	/**
	 * 分享
	 */
	function handleShare() {
		const item = unref(info);
		shareRef.value.handleShow({ path: 'pages/index/acitvityDetails', scene: `id=${item?.id}`, activityId: item?.id, title: item?.activityName });
	}

	/**
	 * 收藏
	 */
	function handleCollect() {
		uni.$u.throttle(async function () {
			await qxCommentCollectEdit({ collectType: '1', collectId: info.value?.id, isCollect: info.value?.isCollect });
			info.value.collect = (info.value.isCollect ? info.value.collect - 1 : info.value.collect + 1);
			// console.log(info.value.isCollect ? info.value.collect-- : info.value.collect++);
			info.value.isCollect = !info.value.isCollect;
			uni.showToast({
				icon: 'none',
				title: info.value.isCollect ? '收藏成功' : '取消收藏'
			})
		}, 1000)
	}

	/**
	 * 图集/视频跳转
	 */
	function handleclick(path, type, title) {
		uni.$u.route(path, {
			id: info.value?.id,
			activityName: info.value?.activityName,
			type,
			title,
		});
	}
</script>

<style lang="scss" scoped>
	.acitvity_details {
		position: relative;

		.acitvity_details_img {
			width: 100%;
			height: 390rpx;
			display: block;
		}

		.acitvity_details_status {
			position: absolute;
			right: 0;
			top: 0;
			width: 170rpx;
			height: 170rpx;
		}

		.acitvity_details_header {
			padding: 32rpx 24rpx 0 24rpx;
			background-color: #ffffff;

			.acitvity_details_header_title {
				font-size: 40rpx;
				font-weight: 600;
			}

			.acitvity_details_header_tag {
				margin: 12rpx 0 0 0;

				text {
					border-radius: 192rpx;
					background: #FCF2EE;
					padding: 6rpx 18rpx;
					display: inline-block;
					font-size: 26rpx;
					color: #BC6C60;
					margin-right: 20rpx;
					margin-top: 14rpx;
					font-weight: 550;
					margin-bottom: 12rpx;
				}
			}

			.acitvity_details_header_text {
				font-size: 30rpx;
				margin-bottom: 20rpx;
				font-weight: 600;
			}

			.acitvity_details_header_price {
				display: flex;

				.acitvity_details_header_text {
					flex: 0.5
				}
			}

			.acitvity_details_header_people {
				display: flex;

				&>view {
					flex: 0.5;
					display: flex;
					align-items: center;
					// justify-content: space-between;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 24rpx;
					}
				}
			}

			.acitvity_details_header_btn {
				display: flex;
				border-top: 2rpx solid #EFEFEF;

				&>view {
					flex: 0.5;
					display: flex;
					justify-content: center;
					align-items: center;
					border-right: 2rpx solid #EFEFEF;
					padding: 34rpx 0;
					font-weight: 520;

					&:last-child {
						border-right: 0;
					}

					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}
			}

			.red {
				color: red;
			}

			.decoration {
				text-decoration: line-through;
				color: #666666;
			}
		}

		.acitvity_details_title {
			display: flex;
			align-items: baseline;
			color: #835C3C;
			padding: 26rpx 24rpx;
			font-weight: bolder;

			text {
				display: inline-block;
				width: 8rpx;
				height: 32rpx;
				background-color: #835C3C;
				margin-right: 20rpx;
			}
		}

		.acitvity_details_base {
			background-color: #ffffff;
			padding: 28rpx 24rpx 24rpx;

			.acitvity_details_base_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 22rpx;

				.acitvity_details_base_top_left {
					font-size: 34rpx;
					font-weight: 800;
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}

				.acitvity_details_base_top_right {
					display: flex;
					align-items: center;
					color: #FF943C;
					font-size: 30rpx;
				}
			}

			.acitvity_details_base_btm {
				color: #00B386;
				font-size: 30rpx;
				display: flex;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					// margin-top: 2px;
				}

				text {
					flex: 1;
				}
			}
		}

		.acitvity_details_synopsis {
			padding: 24rpx;
			background-color: #ffffff;
			line-height: 44rpx;
			font-size: 30rpx;
			text-indent: 60rpx;
			font-weight: 600;
		}

		.acitvity_details_divider {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 40rpx;

			text {
				color: #333333;
				display: inline-block;

				&:first-child,
				&:last-child {
					border-top: 4rpx dashed #808080;
					width: 100rpx;
				}
			}
		}

		.acitvity_details_guide {
			padding: 24rpx;
			margin-bottom: 150rpx;
			background-color: #ffffff;
		}

		.acitvity_details_btn {
			// height: 88rpx;
			display: flex;
			width: 100%;
			position: fixed;
			bottom: 0;
			justify-content: space-around;
			background-color: #ffffff;
			padding-top: 16rpx;

			&>view,
			&>button {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0;
				background-color: transparent;
				padding: 0;
				// height: 88rpx;
				line-height: 40rpx;

				&::after {
					border: 0;
					height: auto;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 28rpx;
					color: #8C8C8C;
					display: inline-block;
					padding-bottom: 8rpx;
				}
			}
		}
	}
</style>